<script setup>
import { reactive, ref } from "vue";
import { getUserCloud, getUserCloudDelete } from "../../../apis/user";
import { createWindow, ipcRendererSend } from "../../../utils/ipcRenderer";
import { storeToRefs } from "pinia";
import { musicStore } from "@/store/music";
import { formatTime } from "../../../utils/tool";
import { Local } from "../../../utils/storage";
import { Notifcation } from "../../../utils/RmMessage";
const { songListIds, musicDetail, songId } = storeToRefs(musicStore());
const songList = ref([]);
const currentPage = ref(1);
const count = ref(0);
const loading = ref(false);

const getInit = async (page) => {
  loading.value = true;
  currentPage.value = page;
  await getUserCloud(30, (page - 1) * 30).then((res) => {
    count.value = res.count;
    songList.value = res.data.map((item) => item.simpleSong);
    loading.value = false;
  });
};

getInit(1);

const handlePlay = (item) => {
  musicDetail.value = item;
  songListIds.value = songList.value;
  Local.set("songList", songList.value);
  Local.set("musicInfo", item);
  songId.value = item.id;
  ipcRendererSend("windows-param", {
    emit: "playMusic",
    data: item.id,
    targetName: "home",
  });
};

const handleSinger = (id) => {
  createWindow({
    windowName: "singerDetail",
    path: "singerDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleVideo = (id) => {
  createWindow({
    windowName: "videoDetail",
    path: "videoDetail",
    width: 1360,
    height: 820,
    param: { id: id },
  });
  ipcRendererSend("windows-param", {
    emit: "playVideo",
    targetName: "home",
  });
};

//删除云盘歌曲
const handleDelete = (id, name, index) => {
  ElMessageBox.confirm(`是否将 ${name} 移除云盘?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      getUserCloudDelete({ id: id }).then((res) => {
        if (res.code == 200) {
          Notifcation.success("删除成功");
          songList.value.splice(index, 1);
        }
      });
    })
    .catch(() => {});
};
</script>

<template>
  <div v-loading="loading" class="cloud_container">
    <div class="musicList">
      <div class="list_wrap">
        <div class="item_wrap">
          <div
            @dblclick="handlePlay(item)"
            v-for="(item, index) in songList"
            :key="index"
            class="item"
            :class="{ active_position: item.id === songId }"
          >
            <div v-if="item.al" @click="toAlbum(item.al.id)" class="cover">
              <img :src="item.al.picUrl+`${'?param=50y50'}}`" alt="" />
            </div>
            <div v-else @click="toAlbum(item.al.id)" class="cover">
              <img src="../../../assets/images/logo/logo2.png" alt="" />
            </div>
            <div class="info">
              <div class="name">
                {{ item.name }}
              </div>
              <div
                v-if="item.ar"
                @click="handleSinger(item.ar[0].id)"
                class="creator_name"
              >
                {{ item.ar[0].name }}
              </div>
            </div>
            <div v-if="item.al" class="album">{{ item.al.name }}</div>
            <div class="timer">
              {{ formatTime(item.dt) }}
            </div>
            <div class="btn">
              <div
                @click="handleDelete(item.id, item.name, index)"
                class="iconfont icon-shanchu load"
              ></div>
            </div>
            <div class="mv">
              <el-button
                @click="handleVideo(item.mv)"
                size="small"
                v-if="item.mv != 0"
                type="primary"
                >mv</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout=" prev, pager, next"
          :total="Math.ceil(count / 100) * 30"
          :pager-count="7"
          @current-change="getInit"
          :current-page="currentPage"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cloud_container {
  .musicList {
    // padding: 2rem 5.25rem;
    .list_wrap {
      // width: 80%;
      .item_wrap {
        .item {
          cursor: pointer;

          background-color: #fff;
          height: 40px;
          padding: 10px 0;
          display: flex;
          align-items: center;
          border-radius: 10px;
          .cover {
            margin: 0 10px;
            width: 45px;
            height: 45px;
            border-radius: 5px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
            }
          }
          .info {
            margin-left: 10px;
            width: 30%;
            .name {
              width: 100%;
              font-weight: 600;
              font-size: 17px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .creator_name {
              width: 120px;
              color: #525252;
              font-size: 13px;
              &:hover {
                text-decoration: underline;
              }
            }
            .active_position {
              color: #335eea;
            }
          }
          .album {
            color: #525252;
            width: 30%;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .timer {
            margin-left: 5px;
            color: #525252;
            font-size: 15px;
          }
          .btn {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
              display: none;
              margin-left: 20px;
            }
            div:hover {
              transform: scale(1.1);
            }
            .like {
              font-size: 23px;
            }
          }
          .mv {
            width: 8%;
            text-align: right;
            margin-right: 10px;
            &:hover .el-button {
              transform: scale(1.1);
            }
            .el-button {
              background-color: #fff;
              color: rgb(16, 24, 134);
              font-weight: 600;
              border: none;
              border-radius: 5px;
            }
          }
        }
        .active_position {
          color: #335eea;
          background: #eaeffd;
          .info {
            .name,
            .creator_name {
              color: #335eea;
            }
          }
          .album,
          .timer {
            color: #335eea;
          }
        }
        .item:hover {
          background-color: #f6f6f8;
        }
        .item:hover .btn div {
          display: block;
        }
      }
    }
  }
}
</style>
